<template>
	<view class="container uni-pb-16">
		<uwo-nav-bar bgColor="#2979ff">
			<template #content>添加表单</template>
		</uwo-nav-bar>
		<!-- 如果只有一组内容就去掉uni-section -->
		<uni-section title="表单校验" type="line">
			<view class="uni-px-8">
				<!-- 基础表单校验 -->
				<uni-forms :border="true" ref="myForm" :modelValue="formData" :label-width="90">
					<uni-forms-item label="姓名xxx:">
						<view class="text-view">固定的名称</view>
					</uni-forms-item>
					<uni-forms-item
						label="后缀图标"
						required
						name="name"
						:rules="[
							{
								required: true,
								errorMessage: '姓名不能为空'
							}
						]"
					>
						<view>
							<view class="text-view">
								<view class="text">张三，李四李四李四李四李四李四李四李四李四李四李四李四李李四</view>
								<view class="action">选择</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item
						label="姓名图标:"
						required
						name="name1"
						:rules="[
							{
								required: true,
								errorMessage: '姓名不能为空'
							}
						]"
					>
						<view>
							<view class="text-view">
								<view class="text"><uni-easyinput trim="all" v-model="formData.name1" placeholder="" /></view>
								<view class="action">选择</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item
						label="介绍图标:"
						required
						name="name2"
						:rules="[
							{
								required: true,
								errorMessage: '姓名不能为空'
							}
						]"
					>
						<view class="">
							<view class="text-view">
								<view class="text"><uni-easyinput trim="both" type="textarea" v-model="formData.name2" placeholder="请输入自我介绍" /></view>
								<view class="action">选择</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item
						label="姓名:"
						required
						name="name3"
						:rules="[
							{
								required: true,
								errorMessage: '姓名不能为空'
							}
						]"
					>
						<uni-easyinput trim="all" v-model="formData.name3" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item
						label="签名:"
						required
						name="signature"
						:rules="[
							{
								required: true,
								errorMessage: '签名不能为空'
							}
						]"
					>
						<uwo-autograph v-model="formData.signature">
							<view>
								<uni-icons custom-prefix="uwofont" type="uwo-qianming" color="#2979ff" :size="16"></uni-icons>
								<text class="uni-ml-2">点击签名</text>
							</view>
						</uwo-autograph>
					</uni-forms-item>
					<uni-forms-item
						label="文件上传:"
						required
						name="appendix"
						:rules="[
							{
								required: true,
								errorMessage: '文件不能为空'
							}
						]"
					>
						<uwo-upload
							v-model="formData.appendix"
							:maxCount="10"
							:disabled="false"
							:static-url="getEnv().API_URL_STATIC"
							:uploadUrl="getEnv().API_URL_UPLOAD"
							:headers="tokenUtil.getTokenHeader"
						></uwo-upload>
						<view class="text-info">建议宽高比例750*450</view>
					</uni-forms-item>

					<uni-forms-item
						label="年龄:"
						required
						name="age"
						:rules="[
							{
								required: true,
								errorMessage: '年龄不能为空'
							},
							{
								validateFunction: function (rule, value, data, callback) {
									if (value < 18) {
										callback('未成年禁止注册');
									}
									return true;
								}
							}
						]"
					>
						<uni-easyinput trim="all" v-model="formData.age" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item
						label="性别:"
						required
						name="sex"
						:rules="[
							{
								required: true,
								errorMessage: '性别不能为空'
							}
						]"
					>
						<uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
					</uni-forms-item>
					<uni-forms-item
						label="兴趣爱好:"
						required
						name="hobby"
						:rules="[
							{
								required: true,
								errorMessage: '兴趣爱好不能为空'
							}
						]"
					>
						<uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" />
					</uni-forms-item>
					<uni-forms-item label="自我介绍" name="introduction">
						<uni-easyinput trim="both" type="textarea" v-model="formData.introduction" placeholder="请输入自我介绍" />
					</uni-forms-item>
					<uni-forms-item
						label="级联选择:"
						name="treeData"
						required
						:rules="[
							{
								required: true,
								errorMessage: '级联选择不能为空'
							}
						]"
					>
						<uwo-data-picker
							:map="{ id: 'id', name: 'name', fullName: 'fullName', parentId: 'pid' }"
							:sourceData="treeSource"
							v-model="formData.treeData"
							@change="handleChange"
						></uwo-data-picker>
					</uni-forms-item>
					<uni-forms-item label="级联选择禁用:" name="treeData">
						<uwo-data-picker
							:map="{ id: 'id', name: 'name', fullName: 'fullName', parentId: 'pid' }"
							:disabled="true"
							:sourceData="treeSource"
							v-model="formData.treeData"
						></uwo-data-picker>
					</uni-forms-item>
					<uni-forms-item
						label="周选择:"
						name="week"
						required
						:rules="[
							{
								required: true,
								errorMessage: '周选择不能为空'
							}
						]"
					>
						<uwo-week-picker :disabled="false" @change="handleChange" v-model="formData.week"></uwo-week-picker>
					</uni-forms-item>
					<uni-forms-item
						label="月选择:"
						name="month"
						required
						:rules="[
							{
								required: true,
								errorMessage: '月选择不能为空'
							}
						]"
					>
						<view class="text-box">
							<uwo-month-picker :disabled="false" @change="handleChange" v-model="formData.month"></uwo-month-picker>
						</view>
					</uni-forms-item>
					<uni-forms-item
						label="季选择:"
						name="season"
						required
						:rules="[
							{
								required: true,
								errorMessage: '季选择不能为空'
							}
						]"
					>
						<view class="text-box">
							<uwo-season-picker :disabled="false" @change="handleChange" v-model="formData.season"></uwo-season-picker>
						</view>
					</uni-forms-item>
					<uni-forms-item
						label="年选择:"
						name="year"
						required
						:rules="[
							{
								required: true,
								errorMessage: '年选择不能为空'
							}
						]"
					>
						<view class="text-box">
							<uwo-year-picker :disabled="false" @change="handleChange" v-model="formData.year"></uwo-year-picker>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>

		<uni-row :gutter="10" class="uni-mt-10 uni-px-8">
			<uni-col :span="24">
				<button class="cu-btn lg block bg-primary" @click="submit()">提交</button>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import { getEnv } from '@/common/config.js';
import tokenUtil from '@/common/js/tokenUtil.js';

const treeSource = ref([
	{
		id: '1514905826354003968',
		name: '基础管理',
		code: '100',
		fullName: '基础管理',
		pid: '0'
	},
	{
		id: '1514905831177453568',
		name: '现场管理',
		code: '101',
		fullName: '现场管理',
		pid: '0'
	},
	{
		id: '1514905826475638784',
		name: '资质证照',
		code: '100100',
		fullName: '基础管理>资质证照',
		pid: '1514905826354003968'
	},
	{
		id: '1514905826953789440',
		name: '安全生产管理机构及人员',
		code: '100101',
		fullName: '基础管理>安全生产管理机构及人员',
		pid: '1514905826354003968'
	},
	{
		id: '1514905827318693888',
		name: '安全生产责任制',
		code: '100102',
		fullName: '基础管理>安全生产责任制',
		pid: '1514905826354003968'
	},
	{
		id: '1514905827658432512',
		name: '安全生产管理制度',
		code: '100103',
		fullName: '基础管理>安全生产管理制度',
		pid: '1514905826354003968'
	},
	{
		id: '1514905828006559744',
		name: '安全操作规程',
		code: '100104',
		fullName: '基础管理>安全操作规程',
		pid: '1514905826354003968'
	},
	{
		id: '1514905828358881280',
		name: '教育培训',
		code: '100105',
		fullName: '基础管理>教育培训',
		pid: '1514905826354003968'
	},
	{
		id: '1514905828707008512',
		name: '安全生产管理档案',
		code: '100106',
		fullName: '基础管理>安全生产管理档案',
		pid: '1514905826354003968'
	},
	{
		id: '1514905829055135744',
		name: '安全生产投入',
		code: '100107',
		fullName: '基础管理>安全生产投入',
		pid: '1514905826354003968'
	},
	{
		id: '1514905829399068672',
		name: '应急管理',
		code: '100108',
		fullName: '基础管理>应急管理',
		pid: '1514905826354003968'
	},
	{
		id: '1514905829747195904',
		name: '特种设备基础管理',
		code: '100109',
		fullName: '基础管理>特种设备基础管理',
		pid: '1514905826354003968'
	},
	{
		id: '1514905830103711744',
		name: '职业卫生基础管理',
		code: '100110',
		fullName: '基础管理>职业卫生基础管理',
		pid: '1514905826354003968'
	},
	{
		id: '1514905830460227584',
		name: '相关方基础管理',
		code: '100111',
		fullName: '基础管理>相关方基础管理',
		pid: '1514905826354003968'
	},
	{
		id: '1514905830820937728',
		name: '其他基础管理',
		code: '100112',
		fullName: '基础管理>其他基础管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471447724032',
		name: '安全基础管理',
		code: '100113',
		fullName: '基础管理>安全基础管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471447724033',
		name: '职业健康管理',
		code: '100114',
		fullName: '基础管理>职业健康管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471451918336',
		name: '危险化学品管理',
		code: '100115',
		fullName: '基础管理>危险化学品管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471456112640',
		name: '设备设施管理',
		code: '100116',
		fullName: '基础管理>设备设施管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471460306944',
		name: '特种设备管理',
		code: '100117',
		fullName: '基础管理>特种设备管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471464501248',
		name: '工艺安全管理',
		code: '100118',
		fullName: '基础管理>工艺安全管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471464501249',
		name: '消防安全管理',
		code: '100119',
		fullName: '基础管理>消防安全管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471468695552',
		name: '相关方管理',
		code: '100120',
		fullName: '基础管理>相关方管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471472889856',
		name: '作业安全管理',
		code: '100121',
		fullName: '基础管理>作业安全管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471477084160',
		name: '施工安全管理',
		code: '100122',
		fullName: '基础管理>施工安全管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471477084161',
		name: '食品安全管理',
		code: '100123',
		fullName: '基础管理>食品安全管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471481278464',
		name: '环保管理',
		code: '100124',
		fullName: '基础管理>环保管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471485472768',
		name: '辐射安全管理',
		code: '100125',
		fullName: '基础管理>辐射安全管理',
		pid: '1514905826354003968'
	},
	{
		name: '能源管理',
		fullName: '基础管理>能源管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471489667073',
		name: '机构、职责与投入',
		code: '100127',
		fullName: '基础管理>机构、职责与投入',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471493861376',
		name: '规章制度',
		code: '100128',
		fullName: '基础管理>规章制度',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471498055680',
		name: '事故应急管理',
		code: '100129',
		fullName: '基础管理>事故应急管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471502249984',
		name: '风险与隐患治理',
		code: '100130',
		fullName: '基础管理>风险与隐患治理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471502249985',
		name: '劳动防护',
		code: '100131',
		fullName: '基础管理>劳动防护',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471506444288',
		name: '交通安全管理',
		code: '100132',
		fullName: '基础管理>交通安全管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471510638592',
		name: '治安管理',
		code: '100133',
		fullName: '基础管理>治安管理',
		pid: '1514905826354003968'
	},
	{
		id: '1590602471514832896',
		name: '防疫卫生管理',
		code: '100134',
		fullName: '基础管理>防疫卫生管理',
		pid: '1514905826354003968'
	},
	{
		id: '1514905831294894080',
		name: '特种设备现场管理',
		code: '101100',
		fullName: '现场管理>特种设备现场管理',
		pid: '1514905831177453568'
	},
	{
		id: '1514905831768850432',
		name: '生产设备设施及工艺',
		code: '101101',
		fullName: '现场管理>生产设备设施及工艺',
		pid: '1514905831177453568'
	},
	{
		id: '1514905832121171968',
		name: '场所环境',
		code: '101102',
		fullName: '现场管理>场所环境',
		pid: '1514905831177453568'
	},
	{
		id: '1514905832477687808',
		name: '从业人员操作行为',
		code: '101103',
		fullName: '现场管理>从业人员操作行为',
		pid: '1514905831177453568'
	},
	{
		id: '1514905832834203648',
		name: '消防安全',
		code: '101104',
		fullName: '现场管理>消防安全',
		pid: '1514905831177453568'
	},
	{
		id: '1514905833186525184',
		name: '用电安全',
		code: '101105',
		fullName: '现场管理>用电安全',
		pid: '1514905831177453568'
	},
	{
		id: '1514905833543041024',
		name: '职业卫生现场安全',
		code: '101106',
		fullName: '现场管理>职业卫生现场安全',
		pid: '1514905831177453568'
	},
	{
		id: '1514905833891168256',
		name: '有限空间现场安全',
		code: '101107',
		fullName: '现场管理>有限空间现场安全',
		pid: '1514905831177453568'
	},
	{
		id: '1514905834247684096',
		name: '辅助动力系统',
		code: '101108',
		fullName: '现场管理>辅助动力系统',
		pid: '1514905831177453568'
	},
	{
		id: '1514905834608394240',
		name: '相关方现场管理',
		code: '101109',
		fullName: '现场管理>相关方现场管理',
		pid: '1514905831177453568'
	},
	{
		id: '1514905834960715776',
		name: '其他现场管理',
		code: '101110',
		fullName: '现场管理>其他现场管理',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471368032256',
		name: '作业场所布置',
		code: '101111',
		fullName: '现场管理>作业场所布置',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471376420864',
		name: '标志与标识',
		code: '101112',
		fullName: '现场管理>标志与标识',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471376420865',
		name: '设备设施',
		code: '101113',
		fullName: '现场管理>设备设施',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471380615168',
		name: '特种设备',
		code: '101114',
		fullName: '现场管理>特种设备',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471384809472',
		name: '电气系统',
		code: '101115',
		fullName: '现场管理>电气系统',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471389003776',
		name: '工艺与仪表系统',
		code: '101116',
		fullName: '现场管理>工艺与仪表系统',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471393198080',
		name: '危险化学品',
		code: '101117',
		fullName: '现场管理>危险化学品',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471397392384',
		name: '职业病危害',
		code: '101118',
		fullName: '现场管理>职业病危害',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471401586688',
		name: '作业行为',
		code: '101119',
		fullName: '现场管理>作业行为',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471405780992',
		name: '相关方作业',
		code: '101120',
		fullName: '现场管理>相关方作业',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471405780993',
		name: '食品安全',
		code: '101121',
		fullName: '现场管理>食品安全',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471409975296',
		name: '水气噪污染防治',
		code: '101122',
		fullName: '现场管理>水气噪污染防治',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471414169600',
		name: '能源节约',
		code: '101123',
		fullName: '现场管理>能源节约',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471418363904',
		name: '固废管理',
		code: '101124',
		fullName: '现场管理>固废管理',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471422558208',
		name: '施工作业',
		code: '101125',
		fullName: '现场管理>施工作业',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471426752512',
		name: '治安防范',
		code: '101126',
		fullName: '现场管理>治安防范',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471430946816',
		name: '交通安全',
		code: '101127',
		fullName: '现场管理>交通安全',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471430946817',
		name: '防疫卫生',
		code: '101128',
		fullName: '现场管理>防疫卫生',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471435141120',
		name: '其他类',
		code: '101129',
		fullName: '现场管理>其他类',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471439335424',
		name: '通风与排水',
		code: '101130',
		fullName: '现场管理>通风与排水',
		pid: '1514905831177453568'
	},
	{
		id: '1590602471443529728',
		name: '辐射安全',
		code: '101131',
		fullName: '现场管理>辐射安全',
		pid: '1514905831177453568'
	}
]);

const myForm = ref();
// 基础表单数据
const formData = ref({
	name: '',
	name1: '',
	name2: '',
	name3: '',
	appendix: [
		{
			name: '1694763699169.jpeg',
			path: '/dev/20230915/912608439b214c7793d792d9652b63bb.jpeg',
			size: 666354,
			suffix: 'jpeg',
			url: null
		}
	],
	signature: [],
	age: '',
	introduction: '',
	sex: 2,
	hobby: [],
	treeData: '',
	week: null,
	// week: {
	// 	//value或者weekDayStart、weekDayEnd必填
	// 	value: '2023-5',
	// 	weekDayStart: '2023-01-24', //(必填)
	// 	weekDayEnd: '2023-01-30' //(必填)
	// },
	// month: {
	// 	//value或者monthDayStart、monthDayEnd必填
	// 	value: '2023-05',
	// 	monthDayStart: '2029-08-01',
	// 	monthDayEnd: '2029-08-31'
	// },
	// season: {
	// 	//value或者monthDayStart、monthDayEnd必填
	// 	value: '2023-2',
	// 	seasonDayStart: '04-01',
	// 	seasonDayEnd: '06-30'
	// },
	year: {
		value: '2025',
		yearDayStart: '2023-01-01',
		yearDayEnd: '2023-12-31'
	}
});

const getParams = () => {
	return {};
};

const handleChange = (v) => {
	console.log(v);
};
// 单选数据源
const sexs = ref([
	{
		text: '男',
		value: 0
	},
	{
		text: '女',
		value: 1
	},
	{
		text: '保密',
		value: 2
	}
]);

// 多选数据源
const hobbys = ref([
	{
		text: '跑步',
		value: 0
	},
	{
		text: '游泳',
		value: 1
	},
	{
		text: '绘画',
		value: 2
	},
	{
		text: '足球',
		value: 3
	},
	{
		text: '篮球',
		value: 4
	},
	{
		text: '其他',
		value: 5
	}
]);
onReady(() => {});
const submit = () => {
	myForm.value
		.validate()
		.then((res) => {
			console.log('success', res);
			uni.showToast({
				title: `校验通过`
			});
		})
		.catch((err) => {
			console.log('err', err);
		});
};
</script>

<style lang="scss" scoped>
.container {
}
</style>